<template>
  <div class="card" :class="props.class">
    <div class="header">
      <slot></slot>
    </div>
    <div class="content">
      <div class="taskInfo">
        <div class="info">
          <el-text tag="b" size="large">待完成任务：{{ props.dataList.uncompletedTaskList?.length }}</el-text>
          <el-text tag="b" size="large">当前任务数：{{ props.dataList.completedTaskList?.length +
            props.dataList.uncompletedTaskList?.length
            }}</el-text>
        </div>
        <div class="chart">
          <el-progress type="circle" :percentage="percentage()" width=70 stroke-width=10 />
          <el-text>完成率</el-text>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- <div class="complete">
        <el-button type="success" round><el-icon>
            <Right />
          </el-icon>完成任务</el-button>
      </div> -->
      <div class="list">
        <h4>待完成设备列表</h4>
        <ol class="deviceList">
          <li v-for="(item, index) in props.dataList.uncompletedTaskList" :key="index" @click="openDeviceTask(item)">{{
            index }}.{{ item.deviceName
            }}</li>
        </ol>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="完成任务" width="1200">
    <el-text tag="b" size="large" type="primary">设备名称:{{ deviceName }}</el-text>
    <el-table :data="taskItems">
      <el-table-column align="center" label="项目名称" prop="name" width="80"></el-table-column>
      <el-table-column align="center" label="项目内容" prop="content"></el-table-column>
      <el-table-column align="center" label="备注" prop="remark"></el-table-column>
      <el-table-column align="center" label="完成情况" width="120">
        <template #default="{ row }">
          <el-select v-model="row.result">
            <el-option value="正常" label="正常"></el-option>
            <el-option value="异常" label="异常"></el-option>
          </el-select>
        </template>

      </el-table-column>
      <el-table-column align="center" label="情况说明">
        <template #default="{ row }">
          <el-input type="textarea" v-model="row.description"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button type="primary" @click="submintItems">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { getItems, sendHisItems } from '@/api/equipment/tactics'
import { ElMessage } from 'element-plus';
const props = defineProps({
  class: String,
  dataList: {
    type: Object,
    default: () => {
      return {
        date: '',
        type: '',
        completedTaskList: [],
        uncompletedTaskList: []
      }
    }
  }
})
const percentage = () => {
  // console.log(props.dataList.uncompletedTaskList.length)
  if (props.dataList.completedTaskList?.length === 0) {
    return 0
  } else {
    return (props.dataList.completedTaskList?.length / (props.dataList.completedTaskList?.length + props.dataList.uncompletedTaskList?.length)) * 100
  }
}
const dialogVisible = ref(false)
const taskItems = ref([])
const deviceName = ref('')
const emits = defineEmits(['reload'])
async function openDeviceTask(row) {
  console.log(row)
  deviceName.value = row.deviceName
  await getItems(row.taskId, row.deviceId).then(res => {
    // console.log(res)
    taskItems.value = res.data.data
  })
  dialogVisible.value = true
}
async function submintItems() {
  await sendHisItems(taskItems.value).then(res => {
    ElMessage.success(res.data.data)
  })
  dialogVisible.value = false
  emits('reload')
}

</script>
<style scoped lang="less">
.card {
  width: 350px;
  height: 750px;
  border-radius: 16px;
  border: 1px solid var(--el-color-info);

  // background-color: green;
  .header {
    width: 100%;
    height: 70px;
    border-radius: 16px 16px 0 0;
    // background-color: #000000;
    border: 1px solid transparent;
    line-height: 70px;
    text-align: center;
    font-size: 30px;
    color: #ffffff;
  }


  .content {
    // padding: 0 35px;

    .taskInfo {
      display: flex;
      width: 100%;
      height: 140px;
      // padding-top: 15px;
      // border: 1px solid var(--el-color-info);

      .info {
        box-sizing: border-box;
        flex-wrap: wrap;
        width: 60%;
        height: 100%;
        padding: 24px 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-content: start;
      }

      .chart {
        display: flex;
        flex-direction: column;
        // width: 30%;
        padding: 25px 40px;


        .el-progress {
          margin-bottom: 5px;
        }
      }
    }

    .complete {
      display: flex;
      width: 100%;

      .el-button {
        width: 120px;
        margin: 16px auto;
      }
    }

    .list {
      h4 {
        margin: 8px 0 8px 16px;
      }

      .deviceList {
        max-height: 450px;
        overflow-y: auto;

        // border: 1px solid var(--el-color-info);
        li {
          cursor: pointer;
          height: 28px;
          font-weight: 300;
        }
      }
    }
  }
}

:deep(.el-dialog) {
  background-color: red;
  border-radius: 20px;
}

.red {
  .header {
    background-color: red;
  }
}

.cyan {
  .header {
    background-color: #00BAAD;
  }
}
</style>